<template>
  <div class="question-ul">
    <div class="main-title">
      <router-link target="_blank" :to="{name: 'QuestionDetail',params: { id: question.question.id} }">
        <div v-if=" question.question.title.length > 22" class="question-title">{{ question.question.title.slice(0, 22) + '...' }}</div>
        <div v-else class="question-title">{{ question.question.title }}</div>
      </router-link>
      <span class="answer-number"> {{ question.answerCount }}个回答</span>
      <span class="use"> 有用 {{ question.usefulCount }}</span>
    </div>
    <div class="content">
      <div class="before" />
      <el-avatar v-if="question.qaVo !== null" :src="question.qaVo.avatar" />
      <el-avatar v-else src="http://rbfvta36h.hd-bkt.clouddn.com/unname.png" />
      <router-link target="_blank" class="question-container" :to="{name: 'QuestionDetail', params: { id: question.question.id } }">
        <div v-if="question.qaVo === null" class="question-content"> 暂无回答，来抢首答吧 </div>
        <div v-else class="question-content"> {{ brief }} </div>
      </router-link>
      <el-link v-for="(subTag, index) in question.subTagList" :key="subTag.id" class="common-a" target="_blank" :underline="false">
        <span class="tip" :class="index === 0 ? (question.qaVo === null ? 'tip-margin-0' : 'tip-margin-50') : ''">{{ subTag.name }}</span>
      </el-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Question',
  props: {
    question: Object()
  },
  data() {
    return {

    }
  },
  computed: {
    // 对时间进行格式化
    formatTime: function() {
      if (this.question) {
        const dt = new Date(this.question.question.createTime)
        const month = dt.getMonth() + 1
        const date = dt.getDate()
        return `${month}月${date}日`
      }
      return ''
    },
    // 截取文章内容的前 35 个字，并加上省略号
    brief: function() {
      const TurndownService = require('turndown').default
      var turndownService = new TurndownService()
      // 这里的this.post.content为数据库保存的html格式，转换成了markdown格式
      return turndownService.turndown(this.question.qaVo.questionAnswer.content).slice(0, 35) + '...'
    }
  }
}
</script>

<style lang="scss">
.question-ul {
  clear: both;
  margin: 0 50px 32px 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid #f3f4f5;
  margin-left: 20px;
}
.main-title{
  margin-bottom: 22px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.answer-number {
  padding: 2px 12px;
  background: #ddefff;
  border-radius: 100px;
  font-size: 12px;
  color: #0b8bff;
  display: inline-block;
  margin-right: 2px;
}
.use{
  padding: 2px 12px;
  background: #ddefff;
  border-radius: 100px;
  font-size: 12px;
  color: #0b8bff;
  display: inline-block;
  margin-right: 2px;
}
.content{
  position: relative;
}
.before{
  position: absolute;
  top: 14px;
  left: 38px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 10px solid #f2f3f4;
}
.el-avatar{
  float: left;
  width: 36px;
  height: 36px;
  margin-right: 12px;
  background-color: #fff;
  border-radius: 50%;
}
.common-a{
  text-decoration: none;
}
.common-a:hover{
  text-decoration: none;
}
.tip-margin-0{
  margin-left: 0px;
}
.tip-margin-50{
  margin-left: 50px;
}
.tip{
  font-size: 12px;
  color: #999;
  line-height: 12px;
  margin-right: 20px;
}
.question-title {
  font-size: 16px;
  color: #333;
  line-height: 20px;
  padding-right: 10px;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 370px;
}
  .question-cover {
    flex: none;
    width: 120px;
    // height: 120px;
    margin-right: 10px;
    > img {
      width: 100%;
    }
  }
  .question-container{
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 12px;
    color: transparent;
    background: #f3f4f5;
    border-radius: 4px;
    padding: 5px 0;
    padding-left: 10px;
  }
  .question-content{
    display: inline;
    vertical-align: top;
    font-size: 12px;
    background: #f3f4f5;
    color: #666;
  }
  .question-content, .question-time {
    font-size: 14px;
  }

  @font-face {
  font-family: "iconfont"; /* Project id 3332477 */
  src: url('//at.alicdn.com/t/font_3332477_84aazre7go8.eot?t=1650808489439'); /* IE9 */
  src: url('//at.alicdn.com/t/font_3332477_84aazre7go8.eot?t=1650808489439#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('//at.alicdn.com/t/font_3332477_84aazre7go8.woff2?t=1650808489439') format('woff2'),
       url('//at.alicdn.com/t/font_3332477_84aazre7go8.woff?t=1650808489439') format('woff'),
       url('//at.alicdn.com/t/font_3332477_84aazre7go8.ttf?t=1650808489439') format('truetype'),
       url('//at.alicdn.com/t/font_3332477_84aazre7go8.svg?t=1650808489439#iconfont') format('svg');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-chakan:before {
  content: "\e628";
}

.icon-quxiaoshoucang:before {
  content: "\e8c2";
}

.icon-shoucang:before {
  content: "\e8c3";
}

.icon-exe-my-attention-primary:before {
  content: "\e915";
}

.icon-wodeguanzhu:before {
  content: "\e60c";
}

.icon-dianzan_kuai:before {
  content: "\ec8c";
}

.icon-pinglun:before {
  content: "\e891";
}

.icon-dianzan:before {
  content: "\ec7f";
}
</style>
